<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Estore购物商城</title>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
    
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
		function _updateProductNum(id,value,num){
			if( !(value >=0 && value <= num) ){
				alert("输入的购买数量不正确");
				return ;
			}
			var path = "<%=request.getContextPath()%>";
			window.location.href = path+"/updateProductNumServlet?id="+id+"&value="+value;
		}
	</script>
</head>
<body>
<div id="art-main">
        <div class="art-sheet">
            <div class="art-sheet-tl"></div>
            <div class="art-sheet-tr"></div>
            <div class="art-sheet-bl"></div>
            <div class="art-sheet-br"></div>
            <div class="art-sheet-tc"></div>
            <div class="art-sheet-bc"></div>
            <div class="art-sheet-cl"></div>
            <div class="art-sheet-cr"></div>
            <div class="art-sheet-cc"></div>
            <div class="art-sheet-body">
                <%@include file="header.jsp" %>
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
                            <div class="art-post">
                                <div class="art-post-tl"></div>
                                <div class="art-post-tr"></div>
                                <div class="art-post-bl"></div>
                                <div class="art-post-br"></div>
                                <div class="art-post-tc"></div>
                                <div class="art-post-bc"></div>
                                <div class="art-post-cl"></div>
                                <div class="art-post-cr"></div>
                                <div class="art-post-cc"></div>
                                <div class="art-post-body">
									  <!-- 购物车列表 -->
									  <div>&nbsp;&nbsp;<img src="images/shopping_myshopping.gif" alt="shopping"/> <a href="#">全场免运费活动中</a></div>
									  <div class="shopping_list_top">您已选购以下商品</div>
									  <br/>
									  <div class="shopping_list_border">
									  <table width="100%" border="0" cellspacing="0" cellpadding="0">
									     <tr class="shopping_list_title">
									       <td class="shopping_list_title_1">商品名</td>
									       <td class="shopping_list_title_2">库存数量</td>
									       <td class="shopping_list_title_3">市场价</td>
									       <td class="shopping_list_title_4">Estore打折价</td>
									       <td class="shopping_list_title_5">数量</td>
									       <td class="shopping_list_title_6">删除</td>
									    </tr>
									    </table>
									    <table width="100%" border="0" cellspacing="0" cellpadding="0">
									    <c:if test="${ empty cart }">
									    	您还没有购买任何商品
									    </c:if>
									    <c:if test="${ not empty cart }">
									    <!-- 
									    	在JSTL中使用foreach遍历map集合，获取到的是一个Entry对象（key和value的对应关系对象）
									    	在map中的key是当前商品的信息，而map中的value是商品的购买数量
									    	在entry对象中有getKey 和 getValue方法
									    		getKey获取到的就是Product对象，在Product对象中getName等方法
									     -->
									     <!-- 
									     	这里需要在循环之前先定义一个变量，一个记录所有商品的总价格totalPrice，一个记录节省的钱savePrice
									      -->
									      <c:set var="totalPrice" scope="page" value="0"></c:set>
									      <c:set var="savePrice" scope="page" value="0"></c:set>
									    <c:forEach items="${cart }" var="entry">
									     <tr class="shopping_product_list" id="shoppingProduct_06">
										       <td class="shopping_product_list_1"><a href="#" class="blue">${ entry.key.name }</a></td>
										       <td class="shopping_product_list_2">${entry.key.pnum}</td>
										       <td class="shopping_product_list_3">￥${entry.key.marketprice }</td>
										       <td class="shopping_product_list_4">￥${entry.key.estoreprice } 
										       	(<fmt:formatNumber value="${ entry.key.estoreprice*10 / entry.key.marketprice}" maxFractionDigits="2" minFractionDigits="2"></fmt:formatNumber>折)</td>
										       
										       <td class="shopping_product_list_5"><input type="text" value="${entry.value }" 
										       onblur="_updateProductNum(${entry.key.id},this.value , ${entry.key.pnum });"/></td>
										       
										       <td class="shopping_product_list_6">
										       <a href="${pageContext.request.contextPath }/delCartProductServlet?id=${entry.key.id}" 
										       class="blue">删除</a></td>
										       
										        <!--计算商品的总价格 -->
										        <c:set var="totalPrice" scope="page" value="${totalPrice + entry.key.estoreprice * entry.value }"></c:set>
									      		<!-- 计算节省的钱 -->
									      		<c:set var="savePrice" scope="page" value="${ savePrice + (entry.key.marketprice -entry.key.estoreprice) * entry.value }"></c:set>
										   </tr> 
										</c:forEach>
									    </c:if>
									   </table>  
									     <div class="shopping_list_end">
									      <ul>
									       <li class="shopping_list_end_1">
									       	<input type="image" src="images/shopping_balance.gif" onclick="window.location='order_add.jsp';"/></li>
									       <li class="shopping_list_end_2">￥${totalPrice }</li>
									       <li class="shopping_list_end_3">商品金额总计：</li>
									       <li class="shopping_list_end_4">您共节省：<label class="shopping_list_end_yellow">￥${savePrice }</label></li>
									      </ul>
									     </div>
									  </div>
									  <!-- 购物车列表结束 -->                        
                           			<div class="cleared"></div>
                                </div>
                            </div>
                        </div> 
                        <%@include file="sidebar.jsp" %>
                    </div>
                </div>
                <div class="cleared"></div>
                <%@include file="footer.jsp" %> 
        		<div class="cleared"></div>
            </div>
        </div>
        <div class="cleared"></div>
    </div>
    
</body>
</html>